<template lang="pug">
  kalix-dialog.user-add(title='添加' bizKey="Imgs" ref="kalixBizDialog" v-bind:formModel.sync="formModel" v-bind:targetURL="targetURL" v-bind:submitBefore="submitBefore")
    div.el-form(slot="dialogFormSlot")
      el-form-item(label="图片路径" prop="imgUrl" v-bind:label-width="labelWidth")
        kalix-clansman-upload(:action="action" v-on:filePath="getFilePath"  fileType="img" :fileList="fileList"
        tipText="只能上传jpg/png文件" )
      el-form-item(label="类型" prop="type" v-bind:label-width="labelWidth")
        kalix-select(v-model="formModel.type" v-bind:requestUrl="trainingGenreURL" placeholder="请选择类别名称"
        v-bind:paramObj="genreParam" v-bind:defaultSelect="true" v-on:selectChange="selectChange")
      el-form-item(label="标识" prop="identify" v-bind:label-width="labelWidth")
        el-input(v-model="formModel.identify" placeholder="标识为1或2(1代表页面的上部图片，2代表页面的下部图片)")
</template>
<!--v-bind:rules="rules.imgUrl"-->
<script type="text/ecmascript-6">
  import {ImgsURL, trainingGenreURL} from '../config.toml'
  import {baseURL} from '../../../../config/global.toml'
  import EventBus from '../../../../components/corelib/common/eventbus'
  import FormModel from './model'
  import KalixClansmanUpload from '../../../../components/fileUpload/upload'
  import KalixSelect from '../../../../components/corelib/components/common/baseSelect'

  export default {
    name: 'ImgsAdd',
    components: {KalixSelect, KalixClansmanUpload},
    data() {
      return {
        action: baseURL + '/camel/rest/upload',
        trainingGenreURL: trainingGenreURL,
        options: [],
        formModel: Object.assign({}, FormModel),
        fileList: [],
        labelWidth: '170px',
        genreParam: undefined,
        // rules: {
        //   protoNum: [{required: true, message: '请输入原住院人数', trigger: 'change'}]
        // },
        targetURL: ImgsURL,
        filePathArr: [],
        fileNameArr: []
      }
    },
    methods: {
      submitAfter() {
        console.log('+++++++++++++++++++')
        this.$nextTick(() => {
          EventBus.$emit('mess')
        })
      },
      init(dialogOption) {
        console.log('---------dialogOption------------', dialogOption)
      },
      selectChange(item) {
        this.formModel.type = item.name
      },
      getFilePath(filePath, fileName) { // 图片上传路径
        this.filePathArr.push(filePath)
        this.fileNameArr.push(fileName)
      },
      submitBefore(baseDialog, callBack) {
        let filePath = ''
        if (this.filePathArr.length > 0) {
          this.filePathArr.forEach(e => {
            filePath += e + ','
          })
          filePath = filePath.substr(0, filePath.length - 1)
        }
        console.log('filePath==========', filePath)
        baseDialog.formModel.imgUrl = filePath
        callBack()
      }
    }
  }
</script>

<style scoped lang="stylus" type="text/stylus">
  .el-form
    width 70%
    margin auto
    .short
      width 38%
      display inline-block
      height 40px
    .el-input
      width 100%
    .radio
      margin-left 20px
      .el-radio
        color: #3465cb
        font-weight: bold
        font-size: 14px

</style>
